<template>
  <div v-if="$route.name != 'home'&& $route.name != 'homepage'">
    <el-button class="footer-logout" @click="logout()">首页{{ timeout }}</el-button>
    <el-dialog
      title="提示"
      :visible.sync="showConfirmTimeOut"
      width="30%"
      custom-class="footer-countdown-dialog"
      append-to-body>
      <span>超时，是否继续操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleTimeOut">取消（{{closeConfirmTimeOut}}s）</el-button>
        <el-button type="primary" @click="handleContinue">继续操作</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import { countDown } from "@js/mixins";

export default {
  name: "Footer",
  props: {},
  mixins: [ countDown ],
  data() {
    return {
      showConfirmTimeOut: false, // 显示超时倒计时弹窗
      closeConfirmTimeOut: this.$store.state.timer.closeConfirmTimeOut, // 自动关闭超时弹框的倒计时时间
      timeout: "",
      timer: null,
      confirmTimer: null
    };
  },
  methods: {
    logout() {
       this.$store.dispatch("user/updateuserinfo", "");
       this.$store.dispatch("user/updatemiinfo", "");
      this.$store.dispatch("appointment/updateAppointmentInfo", "");
      this.$store.dispatch("payrecord/updatepayinfo", "");
      this.$store.dispatch("recipel/updateinvoiceNo", "");
      this.$store.dispatch("recipel/updateRecordsInfo", "");
      this.$store.dispatch("recipel/updateBillInfo", "");
       this.$store.dispatch("route/updatePreStageEnd", "");
       this.$store.dispatch('user/updatemisYbPay', false);//医保支付
      this.$router.push({ name: "home" });
      // this.close();
    },
    close() {
      MessageBox.close();
    },
    timing() {
      const TIME_COUNT = this.$store.state.timer.timeout;
      this.timeout = TIME_COUNT
      this.timer = setInterval(() => {
        if (this.timeout > 0 && this.timeout <= TIME_COUNT) {
          this.timeout--;
          this.$store.dispatch("timer/updateTimeCount", this.timeout);
        } else {
          clearInterval(this.timer);
          // 判断是否需要确认弹窗
          if(this.$store.state.timer.showConfirm){
            this.showConfirmTimeOut = true
            this.closeConfirmCountDown()
          }else{
            this.handleTimeOut()
          }
        }
      }, 1000);
    },
    handleContinue(){
      clearTimeout(this.confirmTimer)
      this.closeConfirmTimeOut = this.$store.state.timer.closeConfirmTimeOut // 重置弹窗倒计时
      this.showConfirmTimeOut = false
      this.resetCountDown()
      this.timing()
    },
    closeConfirmCountDown(){
      if(this.closeConfirmTimeOut > 0 ){
        this.confirmTimer = setTimeout(()=>{
          this.closeConfirmTimeOut--
          this.closeConfirmCountDown()
        },1000)
      }else{
        this.handleTimeOut() 
      }
    },
    handleTimeOut(){
      this.$store.dispatch("timer/updateShowConfirm", false); // 重置是否需要弹出超时提示弹窗
      clearInterval(this.timer);
      // 跳转的页面写在此处
       this.$store.dispatch("user/updateuserinfo", "");
       this.$store.dispatch("user/updatemiinfo", "");
      this.$store.dispatch("appointment/updateAppointmentInfo", "");
      this.$store.dispatch("payrecord/updatepayinfo", "");
      this.$store.dispatch("recipel/updateinvoiceNo", "");
      this.$store.dispatch("recipel/updateRecordsInfo", "");
      this.$store.dispatch("recipel/updateBillInfo", "");
       this.$store.dispatch("route/updatePreStageEnd", "");
       this.$store.dispatch('user/updatemisYbPay', false);//医保支付
      this.$router.push({ name: "home" })
    }
  },
  mounted() {
    this.timing();
  },
  destroyed() {
    if (this.timer) {
      //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  },
  computed: {
    timeCount () {
      return this.$store.state.timer.timeCount
    }
  },
  watch: {
    timeCount(newName, oldName) {
      this.timeout = newName
    }
  },

};
</script>
<style scoped>
.footer-logout {
  position: absolute;
  letter-spacing: 2px;
  right: 30px;
  top: 12px;
  font-size: 15px;
  font-weight: bold;
  color: #2b8df0;
}
</style>
<style>
  .footer-countdown-dialog{
    bottom: 30% !important;
  }
</style>
